<!DOCTYPE html>
<html>
<head>
    <title>BabySmash!</title>
    <meta name="viewport" content="user-scalable=no">
    <meta name="keywords" content="BabySmash, html5" />
    <meta name="description" content="As babies smash on the keyboard, colored shapes, letters and numbers appear on the screen" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link href="css/styles.css" rel="Stylesheet" type="text/css" />
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.custom.min.js" type="text/javascript"></script>
    <script src="js/xregexp-min.js" type="text/javascript"></script>
    <script src="js/xregexp-unicode-base.js" type="text/javascript"></script>
    <script src="js/xregexp-unicode-categories.js" type="text/javascript"></script>
    <script src="js/babysmash.js" type="text/javascript"></script>
    <script src="shapes/js/shapes.js" type="text/javascript"></script>
    <script src="js/platform.js" type="text/javascript"></script>
</head>
<body>
    <span><b>Ctrl-Shift-O</b> for options, <b>ALT-F4</b> to exit</span>
    <canvas id="main" style="position:absolute; left:0; top:0"></canvas>
    <div id="options">
        <h1>Options</h1>
        <img src="images/Close.png" alt="Close" class="close" onclick="babySmash.saveOptions()" />
        <fieldset>
            <legend></legend>
            Start removing after    <input type="text" id="maximumShapes" style="width:50px" /> shapes<br />
            Sounds <select id="sounds">
                        <option value="None">None</option>
                        <option value="Speech">Speech</option>
                        <option value="Laughter">Laughter</option>
                    </select><br />
            Cursor <select id="cursor">
                        <option value="Hand">Hand</option>
                        <option value="Arrow">Arrow</option>
                    </select><br />
            Font    <select id="characterFont">
                        <option value="Arial">Arial</option>
                        <option value="Comic Sans MS">Comic Sans</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="Verdana">Verdana</option>
                    </select><br />
            <input type="checkbox" id="forceUppercase" /> <label for="forceUppercase">Force letters to be uppercase</label><br />
            <input type="checkbox" id="facesOnShapes" /> <label for="facesOnShapes">Faces on shapes</label><br />
            <input type="checkbox" id="clicklessDraw" /> <label for="clicklessDraw">Clickless mouse drawing</label><br />
            <input type="checkbox" id="fadeShapes" /> <label for="fadeShapes">Fade shapes away in</label> <input type="text" id="fadeShapesAfter" style="width:50px" /> secs<br />
        </fieldset>
    </div>
</body>
</html>
